{{! -------------------------------------------------------------------------- }}
{{! Copyright 2002-2023, OpenNebula Project, OpenNebula Systems                }}
{{!                                                                            }}
{{! Licensed under the Apache License, Version 2.0 (the "License"); you may    }}
{{! not use this file except in compliance with the License. You may obtain    }}
{{! a copy of the License at                                                   }}
{{!                                                                            }}
{{! http://www.apache.org/licenses/LICENSE-2.0                                 }}
{{!                                                                            }}
{{! Unless required by applicable law or agreed to in writing, software        }}
{{! distributed under the License is distributed on an "AS IS" BASIS,          }}
{{! WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   }}
{{! See the License for the specific language governing permissions and        }}
{{! limitations under the License.                                             }}
{{! -------------------------------------------------------------------------- }}

<div id="create_vm_group_form_wrapper">
  <form data-abide novalidate id="{{formPanelId}}Wizard" class="custom creation">
    <div class="row">
      <div class="medium-4 columns">
        <label for="vm_group_name">{{tr "Name"}}</label>
        <input required type="text" name="vm_group_name" id="vm_group_name"/>
      </div>
    </div>
    <div class="row">
	    <div class="service_template_param st_man large-12 columns">
	      <label  for="vm_group_description">
	        {{tr "Description"}}
	      </label>
	      <textarea type="text" id="vm_group_description" name="vm_group_description"/>
	    </div>
	</div>
	  <br>
	<div class="row">
		<div id="new_role" class="large-12 columns">
		    <fieldset>
		  		<legend>
		  			<h5 style="padding-bottom:0; margin-bottom:0;">
				        {{tr "Roles"}}
				        <a class="button small radius" id="tf_btn_roles" style="vertical-align: text-top; margin-left: 1em;">
				          <i class="fas fa-lg fa-plus-circle"></i>
				        </a>
			        </h5>
		    	</legend>
			    <div>
			      <ul class="tabs" id="roles_tabs" data-tabs></ul>
			      <div class="tabs-content" id="roles_tabs_content" data-tabs-content="roles_tabs"></div>
			    </div>
			</fieldset>
		</div>
	</div>
	{{{affinity-role-tab}}}
   </form>
</div>
